<template>
    <div class="all">
        <!-- <div style="text-align:center;font-size:28px;font-weight:bold;">{{$route.name}}</div> -->
        <div class="search">
            <el-form ref="form" :model="integralSearch" :inline="true" size="mini">
                <el-form-item label="活动名称：">
                    <el-input v-model="integralSearch.name" clearable placeholder="请输入活动名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="searchClick">查 询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!-- <div class="btn">
            <el-button size="medium" type="primary" @click="add()">添 加</el-button>
        </div> -->
        <div class="table">
            <!-- 表格 -->
            <el-table
                :data="integralTable"
                border
                height="560"
                :style="{width:screenWidth+'px'}"
                :cell-style="cellStyle"
                :header-cell-style="rowClass"
                @selection-change="allSelectionChange"
            >
                <!-- <el-table-column type="selection" width="60px"></el-table-column> -->
                <!-- <el-table-column type="index" label="序号" width="80px"></el-table-column> -->
                <el-table-column label="规则ID" width="90px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.id }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="规则名称" width="160px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.name }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="积分数量" width="100px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.number }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="规则类型" width="130px">
                    <template slot-scope="scope">
                        <span>{{ typename[scope.row.type].name }}</span>
                        <!-- <el-dropdown @command="handleCommand">
                            <span class="el-dropdown-link">
                                {{ typename[scope.row.type].name }}<i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item v-for="item in typename" :key="item.id" :command="beforeHandleCommand(scope.$index, scope.row,item.id)">{{item.name}}</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown> -->
                    </template>
                </el-table-column>
                <el-table-column label="规则状态" width="120px">
                    <template slot-scope="scope">
                        <el-switch
                            v-if="jurisdiction.update_state === 1"
                            class="switch"
                            @change="shelfswitch(scope.row)"
                            v-model="scope.row.state"
                            :active-value="1"
                            :inactive-value="0"
                            active-text="开启"
                            inactive-text="关闭">
                        </el-switch>
                        <span v-else>{{ statename[scope.row.state].name }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="200px" v-if="jurisdiction.update_state === 1 || jurisdiction.delete_state === 1">
                    <template slot-scope="scope">
                        <el-button
                            v-if="jurisdiction.update_state === 1"
                            size="small"
                            type="primary"
                            @click="edit(scope.$index, scope.row)"
                        >修改</el-button>
                        <el-button
                            v-if="jurisdiction.delete_state === 1"
                            size="small"
                            type="danger"
                            @click="remove(scope.$index, scope.row)"
                        >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <el-pagination
                @size-change="pageCount"
                @current-change="currentPageCount"
                :current-page="currentPage"
                :page-sizes="[100, 500,1000,1500, 2000]"
                :page-size="currentCount"
                layout="prev, pager, next, jumper, sizes,total"
                :total="pageResultSize"
            ></el-pagination>
            <div>

                <el-dialog title="添加积分规则" center :visible.sync="dialogVisibleAdd" width="500px" @close="closeEditAdd">
                    <el-form :model="integraladd" ref='integraladd' :rules="addrules" label-width="110px">
                        <el-form-item label="规则名称：" prop="name">
                            <el-input v-model="integraladd.name" clearable placeholder="请输入积分名称"></el-input>
                        </el-form-item>
                        <el-form-item label="积分数量：" prop="number">
                            <el-input v-model="integraladd.number" clearable placeholder="请选请输入积分数量"></el-input>
                        </el-form-item>
                        <el-form-item label="规则类型：" prop="type">
                            <!-- <el-input v-model="integraladd.type"></el-input> -->
                            <el-select v-model="integraladd.type" clearable placeholder="请选择积分规则类型">
                                <el-option v-for="item in typename" :key="item.id" :label="item.name" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="积分状态：" prop="state">
                            <!-- <el-input v-model="integraladd.state"></el-input> -->
                            <el-select v-model="integraladd.state" clearable placeholder="请选择积分状态">
                                <el-option v-for="item in statename" :key="item.id" :label="item.name" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="有效天数：" prop="validity">
                            <el-input v-model="integraladd.validity" clearable placeholder="请输入积分有效期（天）"></el-input>
                        </el-form-item>
                        
                        <!-- <el-select v-model="integralupdate.type">
                            <el-option v-for="item in typename" :key="item.id" :label="item.name" :value="item.id"></el-option>
                        </el-select> -->
                    </el-form>
                    <span slot="footer">
                        <el-button type="primary" @click="confirmEditAdd">提交</el-button>
                        <el-button @click="cancelEditAdd">取消</el-button>
                    </span>
                </el-dialog>

                <el-dialog title="修改积分规则" :visible.sync="dialogVisible" width="450px" @close="closeEdit">
                    <el-form :model="integralupdate" ref='integralupdate' label-width="110px">
                        <el-form-item label="规则数量：">
                            <el-input v-model="integralupdate.number"></el-input>
                        </el-form-item>
                        
                        <!-- <el-select v-model="integralupdate.type">
                            <el-option v-for="item in typename" :key="item.id" :label="item.name" :value="item.id"></el-option>
                        </el-select> -->
                    </el-form>
                    <span slot="footer">
                        <el-button type="primary" @click="confirmEdit">提交</el-button>
                        <el-button @click="cancelEdit">取消</el-button>
                    </span>
                </el-dialog>

            </div>
            
        </div>
    </div>
</template>

<script>
import "../../../static/scss/page.scss";
import utils from "../../util/request";
export default {
    data() {
        return {
            // 分页
            jurisdiction: null,
            currentPage: 1, //初始页面
            currentCount: 100, //当前页面的数据数量
            pageResultSize: 10, //表格数据总数
            screenWidth: window.innerWidth, //可视宽度
            dialogVisible: false, //放大图片的对话框显示
            dialogVisibleAdd: false,
            dialogImageUrl: "", //放大图片的路径
            integralSearch: {
                //搜索
                coupon_name: "", //优惠券名称
                merchantNumber: "", //商户号
                name: "" //活动名称
            },
            integraladd: {
                name: "",
                number: "",
                type: "",
                state: "",
                validity: ""
            },
            integralupdate: {
                number: "",
            },
            integralTable: [],
            typename:[
                {id:0,name:"用户注册"},
                {id:1,name:"添加车辆"},
                {id:2,name:"首次洗车"},
                {id:3,name:"充值或买次数"},
            ],
            statename:[
                {id:0,name:"关闭"},
                {id:1,name:"开启"},
            ],
            addrules:{
                name: [
                    { required: true, message: '请设置积分规则的名称', trigger: 'blur' }
                ],
                number:[
                    { required: true, message: '请设置积分数量', trigger: 'blur' }
                ],
                type: [
                    { required: true, message: '请选择积分规则的类型', trigger: 'change' }
                ],
                state: [
                    { required: true, message: '请选择积分规则的状态', trigger: 'change' }
                ],
                validity: [
                    { required: true, message: '请设置积分的有效时间（天数）', trigger: 'biur' }
                ],
            }
        };
    },
    methods: {
        searchClick() {
            // 查询
        },
        add() {
            // 添加广告活动
            // this.$router.push("/addCampaign");
            this.dialogVisibleAdd = true;
        },
        // 开关事件 切换开启
        shelfswitch(row){
            utils.request("/integralRule/update","post",JSON.stringify({id:row.id,state:row.state})).then(resp=>{
                console.log(resp)
                if(resp.data.code === 200){
                    this.$message({
                        message: "积分规则已"+(row.state?"开启":"关闭"),
                        type: "success"
                    })
                }else{return}
            })
        },

        //监听handleCommand触发，重新对齐默认值重新赋值，return返回新的值
        // beforeHandleCommand(index,row,command){
        //     return {
        //         'index': index,
        //         'row': row,
        //         'command':command
        //     }
        // },
        // // 下拉框事件command默认值被监听修改，添加了循环对象的下标和内容
        // handleCommand(command) {
        //     console.log(command)
        //     this.$confirm('此操作将修改规则类型, 是否继续?', '提示', {
        //         confirmButtonText: '确定',
        //         cancelButtonText: '取消',
        //         type: 'warning'
        //     }).then(() => {
        //         utils.request("/integralRule/update","post",JSON.stringify({id:command.row.id,type:command.command})).then(resp=>{
        //             console.log(resp)
        //             this.$message({
        //             type: 'success',
        //             message: '修改成功!'
        //             });
        //             this.integralTable[command.index].type = command.command;
        //         })
        //     }).catch(() => {
        //         this.$message({
        //         type: 'info',
        //         message: '已取消修改'
        //         });          
        //     });
        // },
         cancelEditAdd(){
            // 取消
            this.dialogVisibleAdd = false;
            for(var i in this.integraladd) this.integraladd[i] = "";
        },
        closeEditAdd() {
            // 关闭修改对话框
            this.dialogVisibleAdd = false;
            // this.integraladd.number = "";
            for(var i in this.integraladd) this.integraladd[i] = "";
        },
        //确认修改
        confirmEditAdd(){
            this.$refs["integraladd"].validate(valid=>{
                if(valid){
                    let thta = this;
                    let data = {}
                    for(var i in this.integraladd) data[i] = this.integraladd[i];
                    console.log(data)
                    utils.request("/integralRule/add","post",JSON.stringify(data)).then(resp=>{
                        console.log(resp)
                        // let key = this.integralupdate.index;
                        if(resp.data.code === 200){
                            data.id = resp.data.data.id
                            this.integralTable.length < this.currentCount ? this.integralTable.push(data) : "";
                            this.dialogVisibleAdd = false;
                            this.integraladd[i] = "";
                            this.$message({
                                message: "添加成功！",
                                type: "success"
                            })
                        }else{return}
                        
                    })
                }else{return}
            })  
        },


        cancelEdit(){
            // 取消
            this.dialogVisible = false;
            this.integralupdate.number = "";
        },
        closeEdit() {
            // 关闭修改对话框
            this.dialogVisible = false;
            this.integralupdate.number = "";
        },
        edit(index, row) {
            // 修改
            this.dialogVisible = true;
            this.integralupdate.number = row.number;
            this.integralupdate.id = row.id;
            this.integralupdate.index = index;
            // this.$router.push({path:"/editCampaign",query:{row:row}});
        },
        //确认修改
        confirmEdit(){
            let data = {id:String(this.integralupdate.id),number:String(this.integralupdate.number)}
            console.log(data)
            utils.request("/integralRule/update","post",JSON.stringify(data)).then(resp=>{
                console.log(resp)
                let key = this.integralupdate.index;
                this.integralTable[key].number = this.integralupdate.number;
                this.dialogVisible = false;
                this.integralupdate.number = "";
            })  
        },

        remove(index, row) {
            // 删除
            
             this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // console.log("123")
                utils.request("/integralRule/delete","post",JSON.stringify({id:row.id})).then(resp=>{
                    console.log(resp)
                    if(resp.data.code){
                        this.integralTable.splice(index,1)     
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    }else{return}
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },
        //   表格居中
        cellStyle: function({ row, column, rowIndex, columnIndex }) {
            return "text-align:center;";
        },
        rowClass: function({ row, rowIndex }) {
            return "text-align:center;";
        },
        allSelectionChange: function(val) {
            // 获取选中的内容
            console.log(val);
        },
        // 每页数据的数量
        pageCount: function(val) {
            this.currentCount = val;
        },
        // 点击的第几页
        currentPageCount: function(val) {
            this.currentPage = val;
        }
    },
    created() {
        let Base64 = require("js-base64").Base64;
        let menuarr = JSON.parse(Base64.decode(sessionStorage.getItem("menuarr")))
        for(var i=0;i<menuarr.length;i++){
            // console.log(menuarr[i].link)
            if(menuarr[i].link === this.$route.path){
                this.jurisdiction = menuarr[i]
            }else{}
        }
        utils.request("/integralRule/list","post",JSON.stringify({page:this.currentPage,list_rows:this.currentCount})).then(resp=>{
            console.log(resp)
            this.integralTable = resp.data.data.data;
            this.pageResultSize = resp.data.data.total;
        })
    }
};
</script>
<style>
/* 开关样式修改 */
.el-switch__label {
    position: absolute;
    display: none;
    font-size: 11px !important;
    color: #fff!important;
}
.el-switch__label *{
    font-size: 11px !important;
}
/*打开时文字位置设置*/
/* switch按钮样式 */
.switch .el-switch__label {
    position: absolute;
    display: none;
    color: #fff !important;
}
/*打开时文字位置设置*/
.switch .el-switch__label--right {
    z-index: 1;
}
/* 调整打开时文字的显示位子 */
.switch .el-switch__label--right span{
    margin-right: 13px;
}
/*关闭时文字位置设置*/
.switch .el-switch__label--left {
    z-index: 1;
}
/* 调整关闭时文字的显示位子 */
.switch .el-switch__label--left span{
    margin-left: 13px;
}
/*显示文字*/
.switch .el-switch__label.is-active {
    display: block;
}
/* 调整按钮的宽度 */
.switch.el-switch .el-switch__core,
.el-switch .el-switch__label {
    width: 50px !important;
    margin: 0;
}
</style>
